<template>
  <div class="chart-doughnut">
    <VChart ref="chart" :option="chartOption" autoresize></VChart>
  </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GraphicComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GraphicComponent,
  GridComponent
])

export default {
  name: 'chart-doughnut',
  components: {
    VChart
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
    }
  },
  computed: {
    chartOption () {
      const chartOption = {
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            let preTitle = this.type === 'count' ? this.$t('all.autotext1665') : this.$t('all.autotext1666')
            const templete = `${preTitle}：${params.value}<br>${this.$t('all.autotext867')}：${params.data.totalAmount || 0}`
            return templete
          }
          // formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          itemGap: 16,
          itemWidth: 8,
          right: '5%',
          icon: 'circle',
          top: 'center',
          textStyle: {
            fontSize: 14,
            color: '#687991',
            rich: {
              totalAmount: {
                fontSize: 14,
                fontWeight: 500,
                color: 'rgba(0, 0, 0, .87)',
                padding: [6, 0, 0, 0],
                align: 'left'
              }
            }
          },
          formatter: (name) => {
            const item = this.data.find(e => e.name === name) || {}
            const textList = [
              `${name} ${item.value || ''}`
            ]
            if (item.totalAmount !== undefined) {
              textList.push(`{totalAmount|${item.totalAmount || ''}}`)
            }
            return textList.join('\n')
          }
        },
        series: [
          {
            name: this.$t('all.autotext545'),
            type: 'pie',
            radius: ['60%', '90%'],
            // radius: '90%',
            center: ['30%', 'center'],
            data: this.data.length
              ? this.data
              : [{ value: 0, name: this.$t('all.autotext1164'), itemStyle: { color: '#D9D9D9' } }],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        ]
      }
      return chartOption
    }
  }
}
</script>

<style scoped lang='less'>
.chart-doughnut {
  height: 250px;
}

</style>

